<template>
	<view>
        <view>
            <u-overlay :show="showImg" @click="showImg=false">
                <view class="warp br08">
                    <view class="wlkflex justify-center">
                        <u--image width="auto" height="1000rpx" radius="4" showMenuByLongpress :src="canvasImg" showLoading lazyLoad mode="heightFix"></u--image>
                    </view>

                    <view class="wlkflex justify-around mt20">
                        <view class="canvas-btn">
                            <u-button @click="showImg=false" :customStyle="{color:'#999'}" color="#FFFFFF" shape="circle" text="取消"></u-button>
                        </view>
                        <view class="canvas-btn" @click.stop="saveImg">
                            <u-button :color="themeColor" shape="circle" text="保存图片"></u-button>
                        </view>
                    </view>
                </view>
            </u-overlay>

            <l-painter ref="painter" hidden useCORS />
        </view>
	</view>
</template>

<script>
    import { saveTempFilePathImg } from '@/wlkutils/tools';
    import { mapGetters } from 'vuex';
    export default {
        computed: {
            ...mapGetters(['userInfo','themeColor','images'])
        },
		name:"wlk-line-poster",
		data() {
			return {
                poster: {
                    css: {
                        width: "750rpx",
                        height: "",
                    },
                    views:[
                        {
                            src: "",
                            type: "image",
                            css: {
                                width: "750rpx",
                            }
                        }
                    ]
                },
                qrcodeInfo:{
                    type: "view",
                    css: {
                        position:'absolute',
                        bottom:'30rpx',
                        right:'30rpx',
                        width:"150rpx",
                        padding:"10rpx",
                        borderRadius:"4px",
                        textAlign:"center",
                        backgroundColor:"#FFFFFF"
                    },
                    views:[]
                },
                canvasImg:'',
                showImg:false
			};
		},
        //属性
        props: {
            posterImg: {
                type:String,
                default:''
            },
            mode:{
                type:String,
                default:''
            },
            qrcode:{
                type:String,
                default:''
            },
        },
        watch: {
            qrcode(val){
                let obj = new Object();
                // #ifndef MP
                obj.text = val;
                obj.type = 'qrcode';
                // #endif
                // #ifdef MP
                obj.type = 'image';
                obj.src = val;
                // #endif
                obj.css ={
                    width: "150rpx",
                    height: "150rpx",
                };
                this.qrcodeInfo.views[0]= obj;
            },
            posterImg(val){
                this.poster.views[0].src  = val;
            },
        },
        methods:{
            canvas(){
                var that = this;
                this.$store.commit("setLoadingShow", true);
                this.poster.views[3] = this.qrcodeInfo;
                // 渲染
                this.$refs.painter.render(this.poster);
                // 生成图片
                let pathType = 'url';
                // #ifdef H5
                pathType = 'base64';
                // #endif
                this.$refs.painter.canvasToTempFilePathSync({
                    fileType: "jpg",
                    // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
                    pathType: pathType,
                    quality: 1,
                    success: (res) => {
                        that.canvasImg = res.tempFilePath;
                        that.showImg = true;
                        that.$store.commit("setLoadingShow", false);
                    }
                });
            },
            saveImg(){
                saveTempFilePathImg(this.canvasImg);
            }
        }
	}
</script>

<style lang="scss">
    .warp{
        margin: 0 auto;
        margin-top: 130rpx;
        width: 90%;
        overflow: hidden;
        image{
            width: auto;
            border-radius: 8px;
        }
        .canvas-btn{
            width: 35%;
        }
    }
</style>